<template>
  <div id="centreLeft1">
    <div class="bg-color-black ">
        <div class="titles" >
          <span>监测数据统计</span>
        </div>
        <div class="d-flex bodyHeight" >
          <div class="dataItem flex-1">
            <div class="mb-2">
              <div class="numBox" style="color:#FFFFFF;">
                <CountTo :startVal='0'  :endVal='userDeviceCount' :duration='3000' :decimals='0' />
              </div>
              <img src="../assets/data_1.png" alt="" class="dataimg"/>
            </div>
            <span class="fw-b" >设备总数(台)</span>
          </div>
          <div class="dataItem flex-1">
            <div class="mb-2">
              <div class="numBox" style="color:#E6F4FF;">
                <CountTo :startVal='0'  :endVal='count' :duration='3000' :decimals='0' />
              </div>
              <img src="../assets/data_2.png" alt="" class="dataimg"/>
            </div>
            <span class="fw-b">监测人数(人)</span>
          </div>
        </div>
    </div>
  </div>
</template>

<script>
import CountTo from 'vue-count-to'
import { mapState } from 'vuex'; // 引入mapState
export default {
  data() {
    return {
      userDeviceCount: 0,
      count: 0,
      timer: null, // 用于存储定时器的引用
    };
  },
  components: {
    CountTo
  },
  computed: {
    ...mapState({
      cityId: state => state.system.cityId, // 从Vuex Store中获取cityId
    }),
  },
  created() {
    // this.getNumberData();
  },
  mounted() {
    // this.startInterval(); // 在组件挂载后启动定时器
    this.getStatics();
     this.$watch('cityId', (newVal, oldVal) => { // 监听cityId的变化
      if (newVal !== oldVal) {
        this.getStatics(); // 当cityId变化时重新请求数据
      }
    });
  },
  beforeDestroy() {
    this.stopInterval(); // 在组件销毁前停止定时器
  },
  methods: {
    startInterval() {
      this.timer = setInterval(this.getStatics, 2000); // 每隔5秒调用一次fetchData函数
    },
    stopInterval() {
      clearInterval(this.timer); // 清除定时器
    },
     formatter (number) {
      const numbers = number.toString().split('').reverse()
      const segs = []

      while (numbers.length) segs.push(numbers.splice(0, 3).join(''))

      return segs.join(',').split('').reverse().join('')
    },
    getStatics() {
      this.$api.statistics({
        region_id: this.cityId, 
      }).then(res => {
          if(res.code == 0) {
            // console.log('89898',res.data)
             this.userDeviceCount = Number(res.data.userDeviceCount);
             this.count = Number(res.data.count);


          }
      })
    }
    
  }
};
</script>

<style lang="scss">
#centreLeft1 {
  height: 3.025rem;
  width: 5.45rem;
  box-sizing: border-box;
  // border: 1px solid red;
  margin-bottom: 0.125rem;

  .bodyHeight {
    height: 2.7rem;
  }

  .dataItem {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .numBox {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 1.42rem;
      z-index: 9;
      font-weight: bold;
      font-size: 0.375rem;
      height: 0.625rem;
    }
    .dataimg {
      width: 1.42rem;
      height: 1.42rem;
      margin-top: -0.75rem;
    }
  }
}
</style>